<template>
<div>
  <div class="header">
    <div class="cover">
      <img :src="playListStore.playListUrl" >
    </div>
    <div class="detils">
      <p style="font-size:20px;line-height: 5px;">{{playListStore.playListName}}</p>
      <div style="display: flex;">
        <img :src="playListStore.avatarUrl" class="avatar">
        <span style="font-size: 15px">{{ playListStore.nickname }}</span>
        <span style="margin-left: 30px;">播放量: {{ playListStore.playCount }}</span>
        <ul class="ul1">
          <li  @click="getplayListbyCategory(item)" v-for="(item,index) in playListStore.tags" :key="item">{{index==0?item:'/'+item}}</li>
        </ul>
      </div>
      <div class="text">
        {{playListStore.playListdescription}}
      </div>
      <div style="position: absolute;bottom:0">
        <el-button type="primary">播放全部</el-button>
        <el-button type="success" @click="subscribed(playListStore.id)">已收藏{{ playListStore.subscribedCount }}</el-button>
      </div>
    </div>
  </div>

  <el-menu
  style="margin-left: 80px;"
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router
  >
    <el-menu-item index="/homePage/songsList/1">歌曲</el-menu-item>
    <el-menu-item index="2" >最近收藏</el-menu-item>
    <el-menu-item index="/homePage/songsList/3">评论</el-menu-item>
    <el-input style="width: 200px;height: 40px;; margin-left: 660px;"
         v-model="input" 
         size="small"
         placeholder="搜索"
        :prefix-icon="Search" 
        clearable />
        <el-dropdown>
      <el-button type="success" style="margin-left:15px;height: 40px;">
        排序<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item>Action 4</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    </el-menu>
  <div><router-view  :whichList="playListStore.List" listType=2></router-view></div>
</div>
</template>

<script setup>
import { ref} from "vue";
import {baseURL} from "@/request/index.js";
import {useRouter} from "vue-router";
import { Calendar, Search } from '@element-plus/icons-vue'
import {useplayListStore,useUserStore} from "@/Store/Pinia/pinia"
import axios from "axios";
const playListStore = useplayListStore();
const songsStore=useUserStore();
songsStore.show=1;
const List=ref(playListStore.List);
function subscribed(id){
  let time=Date.now();
  axios.post(baseURL+"/playlist/subscribe?t=1&id="+id+"&timestamp="+time).then((res) => {
    console.log(res);
})
}

const router=useRouter();
function getplayListbyCategory(name){ //匹配歌单
  songsStore.show=4;
  router.push({path:'/homePage/music_Hall',query:{name:name}})
}

</script>

<style scoped>
.header{
  padding-top: 20px;
  width:100%;
  height: 200px;
  /* background-color: aqua; */
  display: flex;
}

.header .cover{
  width: 250px;
  height: 100%;
  margin-left: 100px;
}

.header .cover img{
  width: 90%;
  height: 90%;
}

.header .detils{
  position: relative;
  width: 100%;
/* background-color: rgba(225, 17, 211, 0.133); */
height: 90%;
}

.avatar{
 width: 30px;
 border-radius: 50%;
}

.ul1{
  list-style-type: none;
}

.ul1 li{
  display: inline;
  margin-left: 5px;
}
.ul1 li:hover{
  color: #8e09dc;
  cursor: pointer;
}
.text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
   overflow: hidden;
}
</style>